<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <nz-spin nzSimple *ngIf="!isLoaded"></nz-spin>
  <form *ngIf="isLoaded" class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.TRANSACTION_CURRENCY' | i18n}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="currency" name="currency" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'TRADE.TRANS_AMT' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <app-trade-amount-input 
              formControlName="amount" 
              name="amount"
              [amountPrecision]="amountPrecision">
            </app-trade-amount-input>
            <nz-form-explain *ngIf="validateForm.get('amount').dirty">
              <ng-container *ngIf="validateForm.get('amount').hasError('required'); else second">{{ 'VALIDATION.REQUIRED' | i18nParams: {name: 'TRADE.TRANS_AMT'} }}</ng-container>
              <ng-template #second>
                <ng-container *ngIf="validateForm.get('amount').hasError('validAmount')">{{'TRADE.ONLINE_CHARGE.VALIDATION.VALID_AMT' | i18n}}</ng-container>
              </ng-template>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'TRADE.ONLINE_CHARGE.ORDER_LIFE' | i18n}}</nz-form-label>
          <nz-form-control>
            <nz-input-group nzAddOnAfter="日" [ngStyle]="{'width': '100%'}">
              <input nz-input formControlName="duration" name="duration" />
            </nz-input-group>
            <nz-form-explain *ngIf="validateForm.get('duration').dirty">
              <ng-container *ngIf="validateForm.get('duration').hasError('required'); else second">{{ 'VALIDATION.REQUIRED' | i18nParams: {name: 'TRADE.ONLINE_CHARGE.ORDER_LIFE'} }}</ng-container>
              <ng-template #second>
                <ng-container *ngIf="validateForm.get('duration').hasError('pattern')">{{'TRADE.ONLINE_CHARGE.VALIDATION.VALID_LIFE_TIME' | i18n}}</ng-container>
              </ng-template>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'TRADE.ONLINE_CHARGE.COMMODITY' | i18n}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="commodity" name="commodity" />
            <nz-form-explain *ngIf="validateForm.get('commodity').dirty">
              <ng-container *ngIf="validateForm.get('commodity').hasError('required'); else second">{{ 'VALIDATION.REQUIRED' | i18nParams: {name: 'TRADE.ONLINE_CHARGE.COMMODITY'} }}</ng-container>
              <ng-template #second>
                <ng-container *ngIf="validateForm.get('commodity').hasError('maxlength')">{{ 'VALIDATION.MAX_LENGTH' | i18n: {length: 128} }}</ng-container>
              </ng-template>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'TRADE.ONLINE_CHARGE.REMARK' | i18n}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="description" name="description" />
            <nz-form-explain *ngIf="validateForm.get('description').dirty">
              <ng-container *ngIf="validateForm.get('description').hasError('required'); else second">{{ 'VALIDATION.REQUIRED' | i18nParams: {name: 'TRADE.ONLINE_CHARGE.REMARK'} }}</ng-container>
              <ng-template #second>
                <ng-container *ngIf="validateForm.get('description').hasError('maxlength')">{{ 'VALIDATION.MAX_LENGTH' | i18n: {length: 128} }}</ng-container>
              </ng-template>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>


